<template>
  <div>
    <!-- <img src="./assets/logo.png"> -->
     <div class="head-tab">
          <div class="tab-info container">
            <router-link to="/" tag="div" class="tab-icon">
                <img src="../../assets/logo.png" alt="">
            </router-link>
            <div class="tab-list">
                <ul class="list-ul">
                    <li v-for="(item, index ) in tabList" :key="index" :class="index==num?'li-aver':''" @click="tabClickTap(index)" >
                        <router-link :to="item.path">{{item.name}}</router-link> 
                    </li>
                </ul>
                    <div class="ipone">
                        <div class="ipone-icon">
                            <img src="../../assets/ipone.png" alt="">
                        </div>
                        <div class="ipone-number">400-993-6300 400</div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: 'top',
  data () {
      return{
          num:0,
          tabList:[
              {
                name: '首页',
                path: '/'
              },{
                name: '城市合伙',
                path: '/City'
              },{
                name: '企业服务',
                path: '/service'
              },{
                name: '人才招聘',
                path: '/Recruitment'
              },{
                name: '媒体报道',
                path: '/mediaReport'
              },{
                name: '关于我们',
                path: '/about'
              }
          ]
      }
  },
  watch:{
  $route(to,from){

    var path = to.path

    this.tabList.forEach((item, index) => {
        if(path == item.path) {
            console.log(item.name)
            this.num = index
        }
    })
  }
},
  methods: {
    tabClickTap (index) {
        this.num  = index
    }
  }
}
</script>

<style lang="stylus" scoped>
    .head-tab
       position fixed
       top 0
       left 0
       width 100%
       height 67px
       background-color #fff
       border-bottom 3px solid #5287ff
       z-index 100
       .tab-info
            height 67px
            display flex
            justify-content space-between
            align-items center
            .tab-icon
                width 100px
                height: 46px
                img 
                    width 100%
            .tab-list
                display flex
                width 862px
                .list-ul
                    display flex
                    margin 0
                    padding 0
                    .li-aver
                        color #fff
                        background-color #5287ff
                    > li
                        height 67px
                        width 110px
                        line-height 67px
                        text-align center
                        font-size 18px
                        > a 
                           width 100%
                           height 100%
                           display block
                .ipone
                    display flex
                    align-items center
                    .ipone-icon
                        width 16px
                        height 17px
                        margin-right 10px
                        img     
                            width 100%
                    .ipone-number
                        font-size 18px
                        color #ffb852
</style>
